<template>
  <div class="home">
    <el-container>
      <el-header>
        <h1>Dashboard</h1>
        <div>
          <el-button @click="goToThreeModel" type="primary" style="margin-right: 10px;">
            3D Model
          </el-button>
          <el-button @click="goToParticleWorld" type="warning" style="margin-right: 10px;">
            Particle World
          </el-button>
          <el-button @click="goToWhiteParticles" type="info" style="margin-right: 10px;">
            White Particles
          </el-button>
          <el-button @click="handleLogout" type="danger">Logout</el-button>
        </div>
      </el-header>
      
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <ECharts :chartId="'lineChart'" :options="lineChartOptions" />
          </el-col>
          <el-col :span="12">
            <ECharts :chartId="'pieChart'" :options="pieChartOptions" />
          </el-col>
        </el-row>
        
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <Table :tableData="tableData" :columns="columns" @edit="handleEdit" @delete="handleDelete" />
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ECharts from '../components/ECharts.vue'
import Table from '../components/Table.vue'

export default {
  components: {
    ECharts,
    Table
  },
  data() {
    return {
      tableData: [
        { date: '2024-01-01', name: 'Sales', value: 1000 },
        { date: '2024-01-02', name: 'Users', value: 500 },
        { date: '2024-01-03', name: 'Orders', value: 750 },
        { date: '2024-01-04', name: 'Revenue', value: 1200 }
      ],
      columns: [
        { prop: 'date', label: 'Date', sortable: true },
        { prop: 'name', label: 'Name', sortable: true },
        { prop: 'value', label: 'Value', sortable: true }
      ],
      lineChartOptions: {
        title: { text: 'Sales Trend' },
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: { type: 'value' },
        series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }]
      },
      pieChartOptions: {
        title: { text: 'User Distribution' },
        series: [{
          type: 'pie',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }]
      }
    }
  },
  methods: {
    handleLogout() {
      this.$store.dispatch('logout')
      this.$router.push('/login')
    },
    handleEdit({ index, row }) {
      console.log('Edit:', index, row)
    },
    handleDelete({ index, row }) {
      console.log('Delete:', index, row)
    },
    goToThreeModel() {
      this.$router.push('/three-model')
    },
    goToParticleWorld() {
      this.$router.push('/particle-world')
    },
    goToWhiteParticles() {
      this.$router.push('/white-particles')
    }
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.el-header {
  background: #409EFF;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
</style>
